<html>

	<head>
		<meta charset="UTF-8" />
		<title>俄罗斯方块</title>
		<style>
			#box {
				border: 1px solid #999;
				border-collapse: collapse;
				margin: 0px;
				padding: 0px;
			}
			
			#box td {
				border: 1px solid #999;
				width: 19px;
				height: 19px;
				text-align: center;
			}
		</style>
	</head>
	<script>
	</script>

	<body>
		<table id="box">

		</table>
		<script src="step1.js">
			/*创建格式的JS代码*/
		</script>
		<script src="step2.js">
			/*初始化7种模型*/
		</script>
		<script src="step3.js">
			/*检查是否合法*/
		</script>
		<script>
			//生产方块形状, 有7种基本形状. 
			var activeBlock = createBlock();
			var timer = null,
				status = 1;

			//向下移动
			function moveDown() {
				if(checkBottom()) {
					erase();
					for(var i = 0; i < 4; i++) {
						activeBlock[2 * i] = activeBlock[2 * i] + 1;
					}
					paint();
				} else {
					//停止移动
					clearInterval(timer);
					//标记这些格子已经有值
					updateBoard();
					//继续进行
					activeBlock = createBlock();
					timer = setInterval(moveDown, 500);
				}

			}
			moveDown()

			//旋转
			//旋转, 因为旋转之后可能会有方格覆盖已有的方格. 
			//先用一个tmpBlock,把activeBlock的内容都拷贝到tmpBlock, 
			//对tmpBlock尝试旋转, 如果旋转后检测发现没有方格产生冲突,则 
			//把旋转后的tmpBlock的值给activeBlock. 
			function rotate() {
				var tmpBlock = new Array(8);

				for(var i = 0; i < 8; i++) {
					tmpBlock[i] = activeBlock[i];
				}
				//先算四个点的中心点，则这四个点围绕中心旋转90度。 
				var cx = Math.round((tmpBlock[0] + tmpBlock[2] + tmpBlock[4] + tmpBlock[6]) / 4);
				var cy = Math.round((tmpBlock[1] + tmpBlock[3] + tmpBlock[5] + tmpBlock[7]) / 4);
				//旋转的主要算法. 可以这样分解来理解。 
				//先假设围绕源点旋转。然后再加上中心点的坐标。 
				console.log(cx + "  : " + cy);
				for(var i = 0; i < 4; i++) {

					tmpBlock[2 * i] = cx + cy - activeBlock[2 * i + 1];
					tmpBlock[2 * i + 1] = cy - cx + activeBlock[2 * i];
				}

				//检查旋转后方格是否合法. 
				for(var i = 0; i < 4; i++) {
					if(!isCellValid(tmpBlock[2 * i], tmpBlock[2 * i + 1])) {
						return;
					}
				}
				//如果合法, 擦除 
				erase();
				//对activeBlock重新赋值. 
				for(var i = 0; i < 8; i++) {
					activeBlock[i] = tmpBlock[i];
				}
				//重画. 
				paint();
			}

			//键盘控制
			function keyControl() {
				if(status != 1) {
					return;
				}
				var code = event.keyCode;
				switch(code) {
					case 37:
						moveLeft();
						break;
					case 38:
						rotate();
						break;
					case 39:
						moveRight();
						break;
					case 40:
						moveDown();
						break;
				}
			}

			document.onkeydown = keyControl;
		</script>
	</body>

</html>